<script>
    export default {
        data() {
            return {
                indicatorDots: true,
                autoplay: true,
                interval: 5000,
                duration: 900,
                circular: true,
                indicatorcolor:"#fff",
                indicatoractivecolor:'#D6D7DC'
            }
        },
        props:{
            imgUrls:{
                type:Array,
                default:()=>{}
            },
            bannerClass:{
                type: String,
                default:''
            }
        },
        components: {},
        methods: {},
        mounted(){},
        created() {}
    }
</script>
<template>
    <div class="BaseBanner" :class="bannerClass">
        <swiper class='banner' :class="bannerClass" :indicator-dots="indicatorDots"
                :indicator-color="indicatorcolor"
                :indicator-active-color="indicatoractivecolor	"
                :autoplay="autoplay"
                :interval="interval"
                :duration="duration"
                :circular="circular"
                @change="swiperChange"
                @animationfinish="animationfinish">
            <div v-for="item in imgUrls" :key="index">
                <swiper-item>
                    <image :src="item" class="slide-image"></image>
                </swiper-item>
            </div>
        </swiper>
    </div>
</template>
<style lang='scss'>
@import "BaseBanner";
</style>
